<template>
    <div class="home yoyo-container mx-auto min-h-screen" style="min-height: 100vh">
      <navBar :title="$t('mine.favorites')" />
      <div class="px-4 mt-4">
        <property-grid :items="properties" :showLiked="true" @updateFavorite="handleUpdateFavorite" />
        <van-empty v-if="!properties.length" :description="$t('common.noData')" />
      </div>
    </div>
  </template>
  
  <script>
  import PropertyGrid from "@/components/home/PropertyGrid.vue"
  import { getFavoriteList } from "@/apis/favorite"
  export default {
    components: {
      "property-grid": PropertyGrid,
    },
    data() {
      return {
        properties: [],
      }
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1)
      },
      async getFavoriteList() {
        try {
          const res = await getFavoriteList()
          this.properties = res.data.list || []
        } catch (error) {
          console.log("object :>> ", error)
        }
      },
      handleUpdateFavorite(id, favorite) {
        this.getFavoriteList()
      },
    },
    created() {
      this.getFavoriteList()
    },
  }
  </script>
  
  <style scoped>
  .home {
    /* simple spacing for home */
    padding-bottom: 60px;
  }
  </style>
  